<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--优先使用IE最新版本和Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chome=1" />
    <!--视口--设备宽度--初始缩放比例--最小缩放比例--最大缩放比例--用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!--禁止浏览器自动的识别-电话号码-email--->
    <meta name="format-detection" content="telephone=no,email=no"/>
    <!--是否启用Web全屏-->
    <meta name="apple-mobile-web-app-capable" content='yes' />
    <meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent">
    <!--设置苹果工具栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content='black' />
    <link rel="stylesheet" type="text/css" href="../sass/zhuce.css"/>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/sign.js"></script>
    <title></title>
</head>
<body>
<!--头-->
<header>
    <div>
        <a href="login.html">返回</a>
    </div>
    <span>淘宝注册</span>
</header>
<!--内容-->
<div class="div_a">
    为了您的账号安全请填写一个手机号完成验证
</div>
<br><br>
<!--input框-->
<ul class="ul_a">
    <li>
        <span>手机号</span>
        <input type="text" class="inp1"/>
        <p class="p1">请输入手机号</p>
    </li>
    <li>
        <span>密&nbsp;&nbsp;&nbsp;码</span>
        <input type="password" class="password"/>
        <p class="p2">请输入密码</p>
    </li>
</ul>
<!--按钮-->
<button class="btn">确定</button>

<div class="reminder">

</div>
</body>
<script type="text/javascript">
//   正则判断
    var reg_phone=/^1[34578]\d{9}$/;
    var reg_pass=/^[\w-`=\\\[\];',./~!@#$%^&*()_+|{}:">?]{6,}$/;
//    按钮  账号和密码开关
    var flag_phone=false;
    var flag_pass=false;

    //手机号码失去焦点

    $('.inp1').blur(function(){
        var inp1=$(this).val();
        if (inp1=='') {
            $('.p1').text('请输入手机号');
            flag_phone=false;
        } else if(reg_phone.test(inp1)){
            $('.p1').text('格式正确');
            flag_phone=true;
        } else{
            $('.p1').text('格式错误');
            flag_phone=false;
        }
    })

    //密码失去焦点
    $('.password').blur(function(){
        var password=$(this).val();
        if (password=='') {
            $('.p2').text('请输入密码');
            flag_pass=false;
        } else if(reg_pass.test(password)){
            $('.p2').text('格式正确');
            flag_pass=true;
        } else{
            $('.p2').text('格式错误');
            flag_pass=false;
        }
    })

//  获取焦点
    $('.inp1').focus(function(){
        $('.reminder').text('');
    })

//   当点击btn的时候
    $('.btn').click(function(){
//        获取账号和密码的val值
        var phone=$('.inp1').val();
        var pass=$('.password').val();
//        如果这个成立执行下面的代码
        if (flag_phone&&flag_pass)  {
            $.ajax({
                type:"post",
                url:"http://47.92.37.168/supermarket/data/register.php",
                async:true,
//                数据
                data:{
                    'user_phone':phone,
                    'user_pass_word':pass
                },
                dataType:"jsonp",
                jsonp:"callback",
                jsonpCallback:"success_JsonpCallback",

                success:function(data){
                    console.log(data);
                    alert('注册成功');
                    if (data.msg=='success') {
                        sessionStorage.setItem('username',phone);
                        					alert('注册成功！');
                        location.href="login.html";
                    } else if(data.msg=='error'){
                        $('.reminder').text(data.reason);
                    }
                },
                error:function(){
                    alert('注册失败!');
                }
            })
        }
    })
</script>

<script type="text/javascript">
    (function () {
        size();
        window.onresize = function () {
            size();
        }
        function size() {
            var winW = document.documentElement.clientWidth || document.body.clientWidth;
            document.documentElement.style.fontSize =  (winW / 320)*100 + "px";
        }
    })()
</script>
</html>
